<template>
	<div>
		<div style="height: 80px; width: 100%"></div>
		<div class="topLogo m1280 f f-a-c f-j-b">
			<div class="lefIn">
				<div class="title">Invoice {{ obj.orderSn }}</div>
				<div class="orgin">Original</div>
			</div>
			<div class="rigIn"><img src="/src/assets/login2.png" alt="" /></div>
		</div>
		<div class="to m1280 f">
			<div class="leftTo">
				<div class="toTit">To</div>
				<div class="can">camilleclaudel7</div>
				<div class="can">United States</div>
			</div>
			<div class="rightData">
				<div class="toTit">Date issued</div>
				<div class="can">{{ formatTimestamp(obj.createTime) }}</div>
				<div style="margin-top: 24px" class="toTit">Order number</div>
				<div class="num">{{ obj.orderSn }}</div>
			</div>
		</div>
		<div class="m1280 tab">
			<div class="top f f-a-c f-j-b">
				<div class="name">Service</div>
				<div class="rigUsd f f-a-c">
					<div class="one f f-a-c">Quantity</div>
					<div class="one f f-a-c">Unit price (USD)</div>
					<div class="one f f-a-c">Total (USD)</div>
				</div>
			</div>
			<div class="cuXian"></div>
			<div class="tops f f-a-c f-j-b">
				<div class="name">Sales</div>
				<div class="rigUsd f f-a-c">
					<div class="one f f-a-c">1</div>
					<div class="one f f-a-c">{{ obj.buyerServicePrice }}</div>
					<div class="one f f-a-c">{{ obj.buyerServicePrice }}</div>
				</div>
			</div>
			<div class="xian"></div>
			<div class="tops f f-a-c f-j-b">
				<div class="name">Service Fee</div>
				<div class="rigUsd f f-a-c">
					<div class="one f f-a-c">1</div>
					<div class="one f f-a-c">{{ obj.price }}</div>
					<div class="one f f-a-c">{{ obj.price }}</div>
				</div>
			</div>
			<div class="xian"></div>
			<div class="botLv f f-a-c">
				<div class="botName f f-a-c">
					<div style="justify-content: end; width: 400px" class="box f f-a-c">
						<div class="one f f-a-c">Total (USD)</div>
						<div class="one f f-a-c">{{ obj.totalPrice }}</div>
					</div>
				</div>
			</div>
		</div>
		<div class="m1280 tab">
			<div class="top f f-a-c f-j-b">
				<div class="name">Method</div>
				<div class="rigUsd f f-a-c">
					<div class="one f f-a-c">Date</div>
					<div class="one f f-a-c">Total (USD)</div>
				</div>
			</div>
			<div class="cuXian"></div>
			<div class="tops f f-a-c f-j-b">
				<div class="name">Paid with Card</div>
				<div class="rigUsd f f-a-c">
					<div class="one f f-a-c">{{ formatTimestamp(obj.payTime) }}</div>
					<div class="one f f-a-c">{{ obj.totalPrice }}</div>
				</div>
			</div>
			<div class="xian"></div>
		</div>
		<div class="m1280 counters">Xpert Inc. is the collection agent for Fiverr International Ltd. All payments are remitted to Xpert Inc. (EIN: 80-0861734)</div>
		<div class="m1280 counterss">Have an invoice or billing question? <span> Contact us</span></div>
		<div class="m1280">
			<!-- lvse -->
			<div class="lvse">Xpert International Ltd.</div>
			<div class="titLv">It Starts Here.</div>
			<div class="elie">
				<div class="aplen">8 Eliezer Kaplan St., Tel Aviv, Israel 6473409</div>
				<div class="complay">Company no: 514440874; Withheld tax file: 917369274; VAT ID Consol. Busn no: 558327284|</div>
			</div>
			<div class="tron f f-a-c f-j-b">
				<div class="ment">Electronic Document</div>
				<div class="pageOf">Page 1 of 1</div>
			</div>
		</div>
		<div style="height: 80px; width: 100%"></div>
	</div>
</template>

<script setup>
	import { CreatePDF } from "@/api/knowClub/index.js";
	import { useRoute } from "vue-router";
	import { ref, onMounted } from "vue";
	import { formatTimestamp, timeHous, formatTimestamps, getTimes } from "@/utils/setting.js";

	let route = useRoute();
	let id = route.query.id;
	let obj = ref({});
	onMounted(() => {
		initObj();
	});
	const initObj = async () => {
		let n = await CreatePDF({ orderId: id });
		obj.value = n.data;
	};
</script>
<style lang="scss" scoped>
	.tron {
		margin-top: 40px;
		.ment {
			font-size: 16px;
			font-family: Manrope, Manrope-700;
			font-weight: 700;
			text-align: LEFT;
			color: #000000;
		}
		.pageOf {
			font-size: 16px;
			font-family: Manrope, Manrope-700;
			font-weight: 700;
			text-align: LEFT;
			color: #000000;
		}
	}
	.lvse {
		font-size: 18px;
		font-family: Manrope, Manrope-700;
		font-weight: 700;
		text-align: LEFT;
		color: #126f43;
	}
	.titLv {
		font-size: 18px;
		font-family: Manrope, Manrope-700;
		font-weight: 700;
		text-align: LEFT;
		color: #000000;
		margin-bottom: 16px;
	}
	.elie {
		.aplen {
			font-size: 14px;
			font-family: Manrope, Manrope-500;
			font-weight: 500;
			text-align: LEFT;
			color: #666666;
		}
		.complay {
			font-size: 14px;
			font-family: Manrope, Manrope-500;
			font-weight: 500;
			text-align: LEFT;
			color: #666666;
		}
	}
	.counters {
		font-size: 18px;
		font-family: Manrope, Manrope-500;
		font-weight: 700;
		text-align: LEFT;
		color: #000000;
		margin-top: 48px;
	}
	.counterss {
		font-size: 18px;
		font-family: Manrope, Manrope-500;
		font-weight: 700;
		text-align: LEFT;
		color: #000000;
		margin-top: 12px;
		margin-bottom: 500px;
		span {
			text-decoration: underline;
		}
	}
	.tab {
		margin-top: 60px;
		.botLv {
			justify-content: end;
			.botName {
				justify-content: end;
				width: 500px;
				border-bottom: 2px solid #d1d1d1;
				padding-bottom: 16px;
				.one {
					justify-content: end;
					width: 200px;
					font-size: 18px;
					font-family: Manrope, Manrope-700;
					font-weight: 700;
					text-align: RIGHT;
					color: #126f43;
				}
			}
		}
		.top {
			.rigUsd {
				.one {
					width: 200px;
					justify-content: end;
					font-size: 18px;
					font-family: Manrope, Manrope-700;
					font-weight: 700;
					text-align: RIGHT;
					color: #000000;
					margin-left: 40px;
				}
			}
			.name {
				font-size: 18px;
				font-family: Manrope, Manrope-700;
				font-weight: 700;
				text-align: LEFT;
				color: #000000;
			}
		}
		.tops {
			.rigUsd {
				.one {
					width: 200px;
					justify-content: end;
					font-size: 18px;
					font-family: Manrope, Manrope-700;
					font-weight: 500;
					text-align: RIGHT;
					color: #000000;
					margin-left: 40px;
				}
			}
			.name {
				font-size: 18px;
				font-family: Manrope, Manrope-700;
				font-weight: 500;
				text-align: LEFT;
				color: #000000;
			}
		}
		.cuXian {
			width: 100%;
			height: 0px;
			border-top: 3px solid #000;
			margin: 16px 0;
		}
		.xian {
			width: 100%;
			height: 0px;
			border-top: 2px solid #d1d1d1;
			margin: 16px 0;
		}
	}
	.to {
		margin-top: 80px;
		.leftTo {
			width: 50%;
			.toTit {
				font-size: 20px;
				font-family: Manrope, Manrope-700;
				font-weight: 700;
				text-align: LEFT;
				color: #000000;
			}
			.can {
				font-size: 20px;
				font-family: Manrope, Manrope-500;
				font-weight: 500;
				text-align: LEFT;
				color: #000000;
				margin-top: 5px;
			}
		}
		.rightData {
			width: 50%;
			.num {
				width: 156px;
				height: 30px;
				font-size: 20px;
				font-family: Manrope, Manrope-700;
				font-weight: 700;
				text-decoration: underline;
				text-align: LEFT;
				color: #4568ca;
				margin-top: 4px;
			}
			.toTit {
				font-size: 20px;
				font-family: Manrope, Manrope-700;
				font-weight: 700;
				text-align: LEFT;
				color: #000000;
			}
			.can {
				font-size: 20px;
				font-family: Manrope, Manrope-500;
				font-weight: 500;
				text-align: LEFT;
				color: #000000;
				margin-top: 5px;
			}
		}
	}
	.topLogo {
		.rigIn {
			width: 128px;
			height: 47px;
			img {
				width: 100%;
				height: 100%;
			}
		}
		.lefIn {
			.title {
				font-size: 40px;
				font-family: Manrope, Manrope-700;
				font-weight: 700;
				text-align: LEFT;
				color: #000000;
			}
			.orgin {
				font-size: 24px;
				font-family: Manrope, Manrope-700;
				font-weight: 700;
				text-align: LEFT;
				color: #126f43;
			}
		}
	}
</style>
